<template>
    <card dis-hover>
        <i-form inline :label-width="80" class="search-column">
            <form-item label="名称" :label-width="40">
                <i-input v-model="search.apiName" clearable placeholder="请输入"/>
            </form-item>
            <form-item label="请求方式">
                <i-select v-model="search.method" clearable>
                    <i-option value="GET">GET</i-option>
                    <i-option value="POST">POST</i-option>
                    <i-option value="DELETE">DELETE</i-option>
                    <i-option value="PUT">PUT</i-option>
                </i-select>
            </form-item>
            <form-item label="访问时间">
                <DatePicker type="datetimerange"
                            v-model="searchTime"
                            format="yyyy-MM-dd HH:mm"
                            placeholder="请选择时间范围"
                            style="width: 300px"></DatePicker>
            </form-item>
            <form-item label="访问时长">
                <InputNumber :min="1" v-model="search.durationStart" placeholder="最小值"></InputNumber>
                <span> - </span>
                <InputNumber :min="1" v-model="search.durationEnd" placeholder="最大值"></InputNumber>
            </form-item>
            <form-item :label-width="0">
                <i-button :loading="loading" type="primary" icon="ios-search" @click="handlerSearch">搜索</i-button>
            </form-item>
        </i-form>
        <i-table stripe
                 border
                 @on-sort-change="handlerSort"
                 :loading="loading"
                 :columns="table.header"
                 :data="table.body"/>
        <page class="pager"
              show-sizer
              :current="page.page"
              :total="page.total"
              @on-change="pageFn"
              @on-page-size-change="pageSizeChangeFn"
              prev-text="上一页"
              next-text="下一页"/>
    </card>
</template>
<script>
    import API from '../../lib/API_PATH'
    import mixinList from '../../mixins/list'

    const initFormData = {
        title: '',
        state: '0',
        type: '0',
        desc: '',
        img: '',
        href: ''
    }
    const DATA_NAME = '历史记录'
    export default {
        name: 'History',
        mixins: [mixinList],
        data() {
            return {
                search: {
                    apiName: '',
                    method: '',
                    sort: '-1',
                    startAt: '',
                    endAt: '',
                    durationStart: null,
                    durationEnd: null,
                    durationSort: null
                },
                table: {
                    header: [
                        {
                            type: 'index',
                            width: 60
                        },
                        {
                            title: '名称',
                            key: 'apiName'
                        },
                        {
                            title: '请求方式',
                            key: 'method'
                        },
                        {
                            title: '接口地址',
                            key: 'url'
                        },
                        {
                            title: 'IP地址',
                            key: 'ip'
                        },
                        {
                            title: '状态',
                            tooltip: true,
                            key: 'state',
                            render(h, params) {
                                const row = params.row
                                let text
                                if (row.state === '0') {
                                    text = '失败'
                                }
                                if (row.state === '1') {
                                    text = '成功'
                                }
                                if (row.state === '3') {
                                    text = '未知'
                                }
                                return h('span', {}, text)
                            }
                        },
                        {
                            title: '请求时长',
                            width: 120,
                            sortable: 'custom',
                            render: (h, params) => {
                                return h('span', params.row.duration + 'ms')
                            }
                        },
                        {
                            title: '用户',
                            render: (h, params) => {
                                let name = ''
                                if (params.row.auth) {
                                    name = params.row.auth.name
                                }
                                return h('span', name)
                            }
                        },
                        {
                            title: '状态码',
                            key: 'apiStatus'
                        },
                        {
                            title: '建立日期',
                            key: 'startAt',
                            sortable: 'custom',
                            width: 170,
                            render: (h, params) => {
                                return h('span', this.$utils.dateFormat(params.row.startAt, 'YYYY-MM-DD HH:mm:ss'))
                            }
                        },
                        {
                            title: '操作',
                            width: 130,
                            render: (h, params) => {
                                const row = params.row
                                const id = row._id
                                const Btn = h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small',
                                        ghost: true,
                                    },
                                    on: {
                                        click: () => {

                                        }
                                    }
                                }, '查看详情')
                                return h('button-group', [
                                    Btn,
                                ])
                            }
                        }
                    ],
                    body: [],
                },
            }
        },
        created() {
        },
        computed: {
            searchTime: {
                get(val) {
                },
                set(val) {
                    this.search.startAt = val[0] ? this.$utils.dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss') : ''
                    this.search.endAt = val[0] ? this.$utils.dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss') : ''
                }
            }
        },
        mounted() {
        },
        methods: {
            async getDataFn() {
                this.loading = true
                this.durationStart ? this.durationStart = Number(this.durationStart) : null
                this.durationEnd ? this.durationEnd = Number(this.durationEnd) : null
                const params = {
                    ...this.search,
                    page: this.page.page,
                    limit: this.page.limit
                }
                try {
                    const {data} = await this.$http(API.API_HISTORY, {params})
                    console.log(data)
                    this.table.body = data.list
                    this.page.total = data.total
                    this.page.page = parseInt(data.page)
                } catch (e) {
                    console.error(e)
                }
                this.loading = false
            },
            handlerSort(data) {
                let {column, key, order} = data
                console.log(column, key, order)
                if (column.title === '请求时长') {
                    if (order === 'desc') {
                        this.search.durationSort = -1
                    }
                    if (order === 'asc') {
                        this.search.durationSort = 1
                    }
                    if (order === 'normal') {
                        this.search.durationSort = ''
                    }
                }
                if (column.key === 'startAt') {
                    if (order === 'asc') {
                        this.search.sort = 1
                    } else {
                        this.search.sort = -1
                    }
                }
                this.getDataFn()
            }
        },
        components: {}
    }
</script>
